<template>
  <!-- 用户注册页面 -->
  <div class="register">
    <!-- 新用户注册 -->
    <p class="register-new-user">新用户注册</p>
    <!-- 注册标题 -->
    <p class="register-title">很高兴您将成为商城会员（注册只需要一步）</p>
    <!-- 手机号phone -->
    <p class="register-phone">
      <input type="text" placeholder="手机号码" v-model="phone" @blur="onBlur" />
      <span class="register-phone-right">
        <van-icon name="phone-o" />
      </span>
    </p>
    <!-- 密码password -->
    <p class="register-password">
      <input type="text" placeholder="密码" v-show="isShow" />
      <input type="password" placeholder="密码" v-show="!isShow" />
      <span class="register-password-right" v-show="!isShow" @click="dain" style="cursor: pointer;">
        <van-icon name="closed-eye" />
      </span>
      <span class="register-password-right" v-show="isShow" @click="dian" style="cursor: pointer;">
        <van-icon name="eye-o" />
      </span>
    </p>
    <!-- 确认密码password -->
    <p class="register-password">
      <input type="text" placeholder="确认密码" v-show="isShow" />
      <input type="password" placeholder="确认密码" v-show="!isShow" />
      <span class="register-password-right" v-show="!isShow" @click="dain" style="cursor: pointer;">
        <van-icon name="closed-eye" />
      </span>
      <span class="register-password-right" v-show="isShow" @click="dian" style="cursor: pointer;">
        <van-icon name="eye-o" />
      </span>
    </p>
    <!-- 用户名user -->
    <p class="register-user">
      <input type="text" placeholder="用户名" />
      <span class="register-user-right">
        <van-icon name="manager" />
      </span>
    </p>
    <!-- 验证码verify -->
    <div class="register-verify">
      <input type="text" placeholder="输入验证码" />
     <p class="verify_img">
        <img src="https://api.it120.cc/small4/verification/pic/get" @click="toimg" ref="verify_img" />
      </p>
    </div>
    <!-- 籍贯native -->
    <p class="register-native" @click="native"></p>
    <!-- 手机验证码phone-verify -->
    <p class="register-phone-verify">
      <input type="text" placeholder />
      <span class="register-phone-verify-right">获取验证码</span>
    </p>
    <!-- 提交click -->
    <div class="register-click">立即注册</div>
    <!-- 已有帐号login -->
    <div class="register-login">
      <p class="login" @click="toLogin">已有帐号？立即登录</p>
    </div>
  </div>
</template>

<script>
// 引入手机验证
import userUtils from "../utils/userUtils.js";

export default {
  data() {
    return {
      isShow: false,
      phone: ""
    };
  },
  methods: {
    //小眼睛
    dain() {
      this.isShow = true;
    },
    dian() {
      this.isShow = false;
    },
    //去登录
    toLogin() {
      this.$router.push({
        path: "/login"
      });
    },
    //籍贯
    native() {},
    //手机失焦验证
    onBlur() {
      this.boolean = userUtils.vetifyPhoneNumber(this.phone);
      console.log(this.boolean);
    },
    //切换验证图
    toimg() {
      this.$refs.verify_img.src = "https://api.it120.cc/small4/verification/pic/get";
    }
  }
};
</script>

<style scoped>
/* 登录账号 */
.register {
  width: 90%;
  height: 14rem;
  border: 1px solid #eee;
  margin: 0 auto;
  margin-top: 0.5rem;
  margin-bottom: 0.3rem;
}
.register-new-user {
  font-size: 0.5rem;
  margin-top: 0.5rem;
  margin-left: 0.8rem;
}
.register-title {
  font-size: 0.3rem;
  margin-top: 0.44rem;
  margin-left: 0.8rem;
  color: #999;
}
.register-phone,
.register-password,
.register-user,
.register-verify,
.register-native,
.register-phone-verify {
  width: 5rem;
  height: 0.86rem;
  border-radius: 0.12rem;
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
  margin-top: 0.44rem;
  margin-left: 1rem;
}
.register-phone span,
.register-password span,
.register-user span,
.register-phone-verify span {
  color: #999;
}
.register-phone input,
.register-password input,
.register-user input,
.register-verify input,
.register-phone-verify input {
  outline: none;
  border: 0rem solid red;
  /* line-height: 0.76rem; */
  margin-top: 0.27rem;
  background: #f5f5f5;
  margin-left: 0.1rem;
}
.register-phone-right,
.register-password-right,
.register-user-right {
  padding-left: 1.2rem;
}
.register-verify img {
  width: 2.4rem;
  height: 0.86rem;
  position: absolute;
  right: 1.2rem;
  bottom: 3.76rem;
}

.register-phone-verify-right {
  width: 50%;
  height: 0.86rem;
  background-color: #fff;
}
.register-click {
  width: 4rem;
  height: 0.8rem;
  font-size: 0.3rem;
  text-align: center;
  line-height: 0.8rem;
  border-radius: 0.1rem;
  color: white;
  /* 背景 */
  background: linear-gradient(90deg, #5ea6f8, #bb87f6);

  /* 阴影 */
  box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 5px;
  margin-top: 0.5rem;
  margin-bottom: 0.3rem;
  margin-left: 1.5rem;
}
/* 已有帐号 */
.register-login {
  margin-top: 0.2rem;
  margin-left: 2.2rem;
  margin-bottom: 0.5rem;
}
.login {
  color: #549ff9;
  padding-left: 0.2rem;
}
</style>